<template>
	<view class="page bg-fff">
		<view class="topBannerWrap bg flex">
			<view class="subTitle font14 top-10 col-fff">上海预计{{ productsCount }}个楼盘入市</view>
		</view>
		<view class="productListWrap boxShadow bg-fff" v-if="productList.length > 0">
			<view class="productItemWrap" v-for="item in productList" :key="item.id">
				<view class="productItem flex" @click="goDetail(item)">
					<view class="productTitleWrap">
						<view class="txtHidden font13 fontBold col-theme">{{ item.title }}</view>
						<view class="txtHidden font12 top-3" v-if="item.beian_title">(备案名:{{ item.beian_title }})</view>
					</view>
					<view class="plateWrap text-center col-grey font12">{{ item.area }}</view>
					<view class="detailBtn col-theme font10">查看详情</view>
				</view>
			</view>
		</view>
		<up-loadmore :status="loadStatus" marginTop="20" v-if="productList.length > 0" />
		<up-gap height="40"></up-gap>
		<up-empty mode="search" v-if="productList.length === 0 && loadStatus === 'nomore'"></up-empty>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { useIndexStore } from '@/store/index';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import { loadAllProducts } from '@/common/api/houses';

const indexStore = useIndexStore();

// 分页相关
let loadStatus = ref('loadmore');
let next = ref('');

// 产品列表
let productsCount = ref(0);
let productList = ref([]);
let loadParams = ref({
	area: '',
	street: '',
	subway: '',
	station: '',
	amount: '',
	house: '',
	size: '',
	more: '',
	city: indexStore.nowCityCode,
	keyword: '',
	tag: 'week'
})

// 获取数据方法
async function getList(isRefresh = false) {
	if (loadStatus.value === 'loading' || loadStatus.value === 'nomore') return;
	
	try {
		loadStatus.value = 'loading';
		let url = (next.value ? next.value : '/product/mall/v6/query');
		const res = await loadAllProducts(url, loadParams.value);
		if(res.status !== 0) {
			uni.$u.toast(res.detail);
			return
		}
		if(isRefresh) {
			productList.value = res.detail.results;
		}else{
			productList.value.push(...res.detail.results);
		}
		productsCount.value = res.detail.count;
		next.value = res.detail.next;
		loadStatus.value = res.detail.next ? 'loadmore' : 'nomore';	
	} catch (error) {}
}

// 监听页面滚动到底部
onReachBottom(() => {
	if (loadStatus.value === 'loadmore') {
		getList();
	}
});

// 初始化加载数据
onLoad((options) => {
	getList(true);
});

//跳转详情
function goDetail(item) {
	uni.navigateTo({
		url: `/pages/product/detail/index?productId=${item.id}`
	})
}

</script>

<style lang="scss" scoped>
.page {
	position: relative;
	min-height: 100vh;
	.topBannerWrap{
		position: relative;
		height: 260rpx;
		background-image: url("https://image.srea.org.cn/xcx/shangshi-yugao-top-bg.jpg");
		.subTitle{
			position: absolute;
			left: 60rpx;
			bottom: 90rpx;
		}
	}
	
	.productListWrap {
		position: relative;
		z-index: 10;
		padding: 50rpx 20rpx;
		margin: -40rpx 20rpx 0 20rpx;
		border-radius: 20rpx;
		.productItemWrap {
			padding: 30rpx 20rpx;
			&:nth-child(odd) {
				background-color: rgba(0,114,53,.15);
			}
			.productItem{
				justify-content: space-between;
				.productTitleWrap{
					width: calc(100% - 400rpx);
				}
				.plateWrap{
					width: 200rpx;
					padding-right: 60rpx;
				}
				.detailBtn{
					padding: 6rpx 20rpx;
					border-radius: 30rpx;
					border: 1rpx solid $theme-color;
				}
			}
		}
	}
}
</style>
